

const symbolSize = 20;
const data = [
    [40, -10],
    [-30, -5],
    [-76.5, 20],
    [-63.5, 40],
    [-22.1, 50]
];

// 可拖拽点
export const DraggablePointsOption = {
    title: {
        text: 'Try Dragging these Points',
        left: 'center'
    },
    tooltip: {
        triggerOn: 'none',
        formatter: function (params) {
            return (
                'X: ' +
                params.data[0].toFixed(2) +
                    '<br>Y: ' +
                params.data[1].toFixed(2)
            );
        }
    },
    grid: {
        top: '8%',
        bottom: '12%'
    },
    xAxis: {
        min: -100,
        max: 70,
        type: 'value',
        axisLine: { onZero: false }
    },
    yAxis: {
        min: -30,
        max: 60,
        type: 'value',
        axisLine: { onZero: false }
    },
    dataZoom: [
        {
            type: 'slider',
            xAxisIndex: 0,
            filterMode: 'none'
        },
        {
            type: 'slider',
            yAxisIndex: 0,
            filterMode: 'none'
        },
        {
            type: 'inside',
            xAxisIndex: 0,
            filterMode: 'none'
        },
        {
            type: 'inside',
            yAxisIndex: 0,
            filterMode: 'none'
        }
    ],
    series: [
        {
            id: 'a',
            type: 'line',
            smooth: true,
            symbolSize: symbolSize,
            data: data
        }
    ]
};
// setTimeout(function () {
//     // Add shadow circles (which is not visible) to enable drag.
//     myChart.setOption({
//         graphic: data.map(function (item, dataIndex) {
//             return {
//                 type: 'circle',
//                 position: myChart.convertToPixel('grid', item),
//                 shape: {
//                     cx: 0,
//                     cy: 0,
//                     r: symbolSize / 2
//                 },
//                 invisible: true,
//                 draggable: true,
//                 ondrag: function (dx, dy) {
//                     onPointDragging(dataIndex, [this.x, this.y]);
//                 },
//                 onmousemove: function () {
//                     showTooltip(dataIndex);
//                 },
//                 onmouseout: function () {
//                     hideTooltip(dataIndex);
//                 },
//                 z: 100
//             };
//         })
//     });
// }, 0);
// window.addEventListener('resize', updatePosition);
// myChart.on('dataZoom', updatePosition);
// function updatePosition() {
//     myChart.setOption({
//         graphic: data.map(function (item, dataIndex) {
//             return {
//                 position: myChart.convertToPixel('grid', item)
//             };
//         })
//     });
// }
// function showTooltip(dataIndex) {
//     myChart.dispatchAction({
//         type: 'showTip',
//         seriesIndex: 0,
//         dataIndex: dataIndex
//     });
// }
// function hideTooltip(dataIndex) {
//     myChart.dispatchAction({
//         type: 'hideTip'
//     });
// }
// function onPointDragging(dataIndex, pos) {
//     data[dataIndex] = myChart.convertFromPixel('grid', pos);
//     // Update data
//     myChart.setOption({
//         series: [
//             {
//                 id: 'a',
//                 data: data
//             }
//         ]
//     });
// }